<template>
    <!-- @click="fullScreen" -->
    <div class="testAnaly" v-if="loading">
        <!-- 其他 图表/图/表 -->
        <LayoutDrag :dragBtnFlag="true" v-if="option.type !== 1">
            <template v-slot:left-content>
                <list class="left_content" v-on="$listeners" v-bind="$attrs" :option="option" />
            </template>
            <template v-slot:right-content>
                <detail class="right_content" v-on="$listeners" v-bind="$attrs" :option="option" @fileUpload="fileUpload"
                    @groupChange="groupChange" @startDraw="startDraw" @updateDraw="updateDraw" :flag="flag"
                    @changeFile="changeFile" />
            </template>
        </LayoutDrag>
        <!-- 文本页面 -->
        <div v-html="option.text" class="text_view" v-else></div>
        <el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" class="error" v-dialogDrag>
            <div v-html="error"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" v-copy="command" v-if="command">复制路径</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import list from '@/components/cloudAnalysis/chartDiagram/components/list.vue'
import detail from '@/components/cloudAnalysis/chartDiagram/components/detail.vue'
import { deepClone } from '@/utils';
import { loadPageContentRequest } from '@/api/cloudAnalysis'
import { loadCloudToolPageRequest, testCloudToolDrawRequest, getFileGroupInfoRequest } from '@/api/tools'
export default {
    name: 'GenescloudUiIndex',
    components: {
        list, detail
    },
    data() {
        return {
            option: {},
            loading: false,
            queryParams: null,
            api: null,
            flag: true,
            dialogVisible: false,
            error: null,
            command: null,
            title: null,
            dialogWidth: '500px'
        };
    },
    created() {
        this.queryParams = this.$queryToObjectsearch(window.location.search)
        this.api = this.queryParams.page === 'editMenu' ? loadCloudToolPageRequest : loadPageContentRequest
        this.init()
    },
    mounted() {
    },

    methods: {
        async fileUpload(id) {
            const [fileId] = id
            const res = await getFileGroupInfoRequest({ fileId, pageCode: this.queryParams.pageCode })
            if (res.code !== 200) return this.$message.error(res.message)
            for (let key in this.option.analysisForm) {
                for (let key1 in res.data) {
                    if (key === key1) {
                        this.option.analysisForm[key] = res.data[key1]
                    }
                }
            }
            for (let key in this.option.chartForm) {
                for (let key1 in res.data) {
                    if (key === key1) {
                        this.option.chartForm[key] = res.data[key1]
                    }
                }
            }
        },
        async init() {
            delete this.queryParams.analysisForm
            delete this.queryParams.chartForm
            this.loading = false
            this.queryParams.currentPage = 'test'
            const res = await this.api(this.queryParams)
            if (res.code !== 200) return this.$message.error(res.message)
            this.option = deepClone(res.data)
            this.option.pageCode = this.queryParams.pageCode
            this.loading = true
        },
        groupChange(config, option) {
            this.option.analysisForm[config.code + config.type + '#'] = option
            if (config.type === 'Ygroup') return
            let num = -1
            const mutualExclusionOptions = option.group.dataGroupList.reduce((pre, item, index) => {
                if (item.ischecked) {
                    num++
                    pre.push({
                        value: num,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            for (let key in this.option.analysisForm) {
                if (key.includes('mutualExclusion#')) {
                    this.option.analysisForm[key] = mutualExclusionOptions
                }
            }
            for (let key in this.option.chartForm) {
                if (key.includes('mutualExclusion#')) {
                    this.option.chartForm[key] = mutualExclusionOptions
                }
            }
        },
        startDraw(query) {
            this.queryParams.analysisForm = query
        },
        async updateDraw(query) {
            this.flag = false
            this.queryParams.chartForm = query
            const res = await testCloudToolDrawRequest(this.queryParams)
            if (res.code !== 200) {
                this.error = res.data.error
                this.command = res.data.command
                this.title = '错误'
                this.dialogVisible = true
            } else {
                this.init()
            }
            this.flag = true
        },
        changeFile(id, code) {
            this.option.analysisForm[code + 'FileId#'] = id
        }
    },
};
</script>

<style lang="scss" scoped>
.testAnaly {
    padding: 30px;
}

.left_content,
.right_content {
    box-shadow: 2px 2px 5px 3px #d7d2d2;
    border-radius: 10px;
    height: calc(100vh - 60px);
    padding-left: 20px;
}

.left_content {
    padding: 0 20px;
    margin-right: 15px;
}

.text_view {
    padding: 0 25px;
    height: calc(100vh - 60px);
    border-radius: 10px;
    overflow-y: auto;
    box-shadow: 0 0 5px 5px #d7d2d2;
}
</style>